<template>
  <el-row :gutter="13" class="dashboard-console-grid">
    <el-col v-bind="grid" class="ivu-mb">
      <el-card shadow="never">
        <router-link :to="{ path: '/userData' }">
          <div class="icon">
            <i class="iconfont" style="color: #9fdb1d"></i>
            <img :src="settingSvg" alt="">
          </div>
          <p>账户设置</p>
        </router-link>
      </el-card>
    </el-col>
    <el-col v-bind="grid" class="ivu-mb">
      <el-card shadow="never">
        <router-link :to="{ path: '/projectAccount/management' }">
          <div class="icon">
            <i class="iconfont" style="color: #b37feb"></i>
            <img :src="declareSvg" style="width: 45px;height: 45px;" alt="">
          </div>
          <p>项目申报</p>
        </router-link>
      </el-card>
    </el-col>
    <el-col v-bind="grid" class="ivu-mb">
      <el-card shadow="never">
        <router-link :to="{ path: '/index/outcomes' }">
          <div class="icon">
            <i class="iconfont" style="color: #f7ba1e"></i>
            <img :src="achievementSvg" alt="">
          </div>
          <p>个人成果</p>
        </router-link>
      </el-card>
    </el-col>
    <el-col v-bind="grid" class="ivu-mb">
      <el-card shadow="never">
        <router-link :to="{ path: '/welcome' }">
          <div class="icon">
            <i class="iconfont" style="color: #f7ba1e"></i>
            <img :src="homeSvg" alt="">
          </div>
          <p>首页</p>
        </router-link>
      </el-card>
    </el-col>
    <el-col v-bind="grid" class="ivu-mb">
      <el-card shadow="never">
        <router-link :to="{ path: '/forum' }">
          <div class="icon">
            <i class="iconfont" style="color: #f7ba1e"></i>
            <img :src="forumSvg" alt="">
          </div>
          <p>论坛</p>
        </router-link>
      </el-card>
    </el-col>
    <el-col v-bind="grid" class="ivu-mb">
      <el-card shadow="never">
        <router-link :to="{ path: '/Information' }">
          <div class="icon">
            <i class="iconfont" style="color: #f7ba1e" />
            <img :src="InformationSvg" alt="">
          </div>
          <p>公告信息</p>
        </router-link>
      </el-card>
    </el-col>
    <el-col v-bind="grid" class="ivu-mb">
      <el-card shadow="never">
        <router-link :to="{ path: '/projectAccount/examine' }">
          <div class="icon">
            <i class="iconfont" style="color: #b37feb"></i>
            <img :src="auditsSvg" alt="">
          </div>
          <p>项目审核</p>
        </router-link>
      </el-card>
    </el-col>
    <el-col v-bind="grid" class="ivu-mb">
      <el-card shadow="never">
        <router-link :to="{ path: '/index/grams' }">
          <div class="icon">
            <i class="iconfont" style="color: #f7ba1e" />
            <img :src="applicationsSvg" alt="">
          </div>
          <p>项目资金申请</p>
        </router-link>
      </el-card>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import settingSvg from '../../image/settingSvg.svg'
import declareSvg from '../../image/declareSvg.svg'
import achievementSvg from '../../image/achievement.svg'
import homeSvg from '../../image/homeSvg.svg'
import forumSvg from '../../image/forumSvg.svg'
import InformationSvg from '../../image/InformationSvg.svg'
import applicationsSvg from '../../image/applicationsSvg.svg'
import auditsSvg from '../../image/auditsSvg.svg'

const grid = reactive({
  xl: 6,
  lg: 6,
  md: 8,
  sm: 12,
  xs: 24,
})

</script>
<style lang="scss">
.dashboard-console-grid {
  text-align: center;
  .ivu-card-body {
    padding: 0;
  }
  img{
    width: 30px;
    height: 30px;
  }
  .icon {
    width: 48px;
    height: 48px;
    background-color: #f6f6f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  i {
    font-size: 24px;
  }
  a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: inherit;
    padding: 16px;
  }
  p {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    line-height: 22px;
    white-space: nowrap;
  }
}

.ivu-mb {
  margin-bottom: 10px;
}

</style>
